import React from 'react';
import {Layout,Table,Row, Col, Button,Input, Tag, Form} from 'antd';
import useEditFormModal from "../../../Components/formTable/useEditFormModal";
import PositionForm from './station.form.component';
import {useRequest} from "ahooks";
import {queryStationList} from './station.service'
import style from './station-page.module.css'
interface PositionTableProps {
    deptId:string;
}
export default function({deptId}:PositionTableProps){
    const {visible, editId, editTitle, show, reset} = useEditFormModal();
    const { run,refresh,tableProps} = useRequest(queryStationList, {paginated: true, defaultPageSize: 20,manual:true},);

    const search = (name:string)=>{
        let {current=0,pageSize=20} = tableProps.pagination;
        run({current,pageSize},{name});
    };

    return (
        <Layout>
            {visible && <PositionForm id={editId} title={editTitle} deptId ={deptId} visible={visible} onOk={()=>{
                reset();
                refresh();
            }} onCancel={reset}/> }
            <Row>
                <Col>
                    <Input placeholder='键入关键字查询' onChange={v=>search(v.target.value)} />
                </Col>
                <Col>
                    <Button onClick={()=>show("新建字典项目")}>新建</Button>
                </Col>
            </Row>
            <Layout.Content>
                <Table {...tableProps} />
            </Layout.Content>
          <div className={style.image}/>
        </Layout>
    )
}
